<template>
    <div class="bigD-cont">
        <i class="bigD-cont-lt"></i>
        <i class="bigD-cont-rt"></i>
        <i class="bigD-cont-lb"></i>
        <i class="bigD-cont-rb"></i>
        <span class="bigD-cont-title">全市结业率</span>
        <div class="yyfx-top">
            <p class="power">{{gradList.jyl}}<span style="font-size:40px">%</span></p>
            <p class="power-title">全市平均培训结业率</p>
        </div>
        <div class="bigD-cont-clhdqd">
            <p class="desc-title">全市平均培训结业率末尾5名</p>
            <ul>
                <li class="bigD-cont-clhdqd-item" v-for="item in gradList.gradList" :key="item.companyId">
                    {{item.jyl}}%<i :style="{width:item.jyl+'%'}" class="bigD-cont-clhdqd-h"></i><span>{{item.name}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
  props: ["gradList"],
  mounted: function() {
    let that = this;
    //车辆活动强度
    $(".bigD-cont-clhdqd-h").addClass("on");
    $(".bigD-cont-clhdqd-m").addClass("on");
    $(".bigD-cont-clhdqd-l").addClass("on");
  }
};
</script>


<style scoped>
.bigD-cont {
  height: 666px;
}
.bigD-cont-clhdqd-item i {
  height: 14px;
  background: #0abfbc !important;
}
.bigD-cont-clhdqd-item {
  padding: 40px 0 4px 0;
  font-size: 18px;
  font-weight: bold;
}
.bigD-cont-clhdqd-4.on {
  width: 15%;
}
.bigD-cont-clhdqd-5.on {
  width: 10%;
}
.bigD-cont-clhdqd {
  height: auto;
  margin: 70px 0 10px 0;
}
.desc-title {
  width: 100%;
  float: left;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}
.power {
  width: 100%;
  text-align: center;
  color: orange;
  font-size: 96px;
  font-weight: bold;
  padding: 40px 0 0 0;
  float: left;
  font-family: fontNUm;
}
.power-title {
  width: 100%;
  float: left;
  text-align: center;
  color: #2887ff;
  font-size: 18px;
  font-weight: bold;
}
</style>

